<template>
	<view v-if="UserInfo && !UserInfo.mobile" class="bindmobile" :style="'padding:' + mydata.padding.top + 'rpx ' + mydata.padding.lr + 'rpx ' + mydata.padding.bottom + 'rpx '">
		<view
			class="containers"
			:style="'border-radius:' + mydata.radius.top + 'rpx ' + mydata.radius.top + 'rpx ' + mydata.radius.bottom + 'rpx ' + mydata.radius.bottom + 'rpx '"
		>
			<view class="main">
				<text class="title" :style="'color:' + mydata.title.color">
					<text class="custom-icon iconfont" v-bind:class="mydata.icon.url" :style="'color:' + mydata.icon.color"></text>
					{{ mydata.title.text }}
				</text>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn" :style="'background:' + mydata.btn.color" @click="shoupup">立即绑定</view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<button class="btn" :style="'background:' + mydata.btn.color" open-type="getPhoneNumber" @getphonenumber="getphone">立即绑定</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';

export default {
	data() {
		return {
			showPopupBottom: false,
			//底层模态框
			popType: 'center',
			mobile: '',
			show: true
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		...mapState({
			UserInfo: state => state.userInfo
		})
	},
	created() {},
	methods: {
		getphone(e) {
			let data = {
				code: e.detail.code,
				encryptedData: e.detail.encryptedData,
				iv: e.detail.iv,
				user_id: this.UserInfo.id
			};
			this.$http('/login/getPhone', data, 'POST').then(res => {
				if (res.statusCode == 200) {
					this.gettokenToUserInfo();
				}
			});
		},

		shoupup() {
			this.Jumpurl({
				type: 1,
				link: '../mine/bindmobile/bindmobile?id=' + this.UserInfo.id,
				login_type: 2
			});
		},
		gettokenToUserInfo() {
			let params = {};
			this.$http('/user/tokenToUserInfo', params, 'GET').then(res => {
				if (res.statusCode == 200) {
					let UserInfo = res.data.msg;
					this.userCenter(UserInfo);
				} else {
					this.$store.commit('setUserInfo', {});
					this.$store.commit('settoken', null);
				}
			});
		},
		userCenter(UserInfo) {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
				uni.navigateBack();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bindmobile {
	.containers {
		margin: 0 auto;
		display: flex;
		flex-wrap: nowrap;
		box-sizing: border-box;
		padding: 20rpx 14rpx;
		border-radius: 12rpx;
		background: rgb(255, 255, 255);
		color: rgb(150, 150, 150);

		.main {
			flex: 1;

			.title {
				font-size: 24rpx;
				line-height: 28rpx;
				padding: 14rpx 0 12rpx;
				display: flex;

				.custom-icon {
					font-size: 28rpx;
					width: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
					text-align: center;
					margin: auto 5rpx auto 0;
				}
			}
		}

		.btn {
			min-width: 156rpx;
			height: 54rpx;
			padding: 16rpx;
			border-radius: 54rpx;
			background: linear-gradient(159.36deg, #ff3c29 0%, #ff6f29 94.38%);
			color: #fff;
			font-size: 24rpx;
			line-height: 24rpx;
			text-align: center;
			margin: auto 0;
			box-sizing: border-box;
		}
	}
}
.uni-block-form {
	width: 686rpx;
	border-radius: 12rpx;
	padding: 16rpx 24rpx;
	.title {
		border-bottom: 1rpx solid #f5f5f5;
		padding: 16rpx 0;
	}
	.item {
		height: 100rpx;
		.label {
			width: 140rpx;
		}
		.input-text {
			border: none;
		}
	}
	.btns {
		justify-content: center;
		margin-top: 15rpx;
		.txt {
			padding: 12rpx 40rpx;
			border-radius: 16rpx;
		}
	}
}
</style>
